$blue: #1890FF;
$grey_blue: #6797CE;
$sidebar_color: #292C35;
$fc: #C8D0E9;
$tips: #FF4A4A ;
$white: #FFF;
$input_color: #16181b;

@mixin bis($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: center;
}

@mixin borderRadius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

@mixin transition($prop, $time, $timeFunc) {
  -webkit-transition: $prop $time $timeFunc;
  -moz-transition: $prop $time $timeFunc;
  -o-transition: $prop $time $timeFunc;
  transition: $prop $time $timeFunc;
}

@mixin opacity($num) {
  filter: alpha(opacity=$num * 100);
  -moz-opacity: $num;
  opacity: $num;
}

@mixin borderTopRadius($radius) {
  -webkit-border-top-left-radius: $radius;
  -moz-border-top-left-radius: $radius;
  -ms-border-top-left-radius: $radius;
  -o-border-top-left-radius: $radius;
  border-top-left--radius: $radius;

  -webkit-border-top-right-radius: $radius;
  -moz-border-top-right-radius: $radius;
  -ms-border-top-right-radius: $radius;
  -o-border-top-right-radius: $radius;
  border-top-right--radius: $radius;
}

@mixin borderBottomRadius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  -moz-border-bottom-left-radius: $radius;
  -ms-border-bottom-left-radius: $radius;
  -o-border-bottom-left-radius: $radius;
  border-bottom-left--radius: $radius;

  -webkit-border-bottom-right-radius: $radius;
  -moz-border-bottom-right-radius: $radius;
  -ms-border-bottom-right-radius: $radius;
  -o-border-bottom-right-radius: $radius;
  border-bottom-right--radius: $radius;
}

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
  font: #{$size}/#{$line-height} $family;
}

@mixin sc($size, $color) {
  font-size: $size;
  color: $color;
}

@mixin fj($type: space-between) {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: $type;
  -webkit-justify-content: $type;
  -moz-justify-content: $type;
  -ms-justify-content: $type;
  -o-justify-content: $type;
}

@mixin centering {
@include fj(center);
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}

@mixin boxShadow($h-shadow, $v-shadow, $blur, $color) {
  -webkit-box-shadow: $h-shadow $v-shadow $blur $color;
  -moz-box-shadow: $h-shadow $v-shadow $blur $color;
  -o-box-shadow: $h-shadow $v-shadow $blur $color;
  box-shadow: $h-shadow $v-shadow $blur $color;
}

@mixin flex_1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
}